<template>
    <div class="homeWrap">
        <TopBar/>
        <transition :name="transitionName">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </transition>
    </div>
</template>


<script lang='ts'>
import { watch,ref,watchEffect } from 'vue-demi'
import TopBar from '../components/TopBar.vue'
import { useRoute } from 'vue-router'
import router from '@/router'
import axios from 'axios'
import { useStore } from 'vuex'


export default {
    components:{TopBar},
    setup(){ 
        let transitionName = ref('')
        let route = useRoute()
        watch(route,()=>{
            console.log( route.meta.index)
            transitionName.value = route.meta.index == 0 ? 'slide-right' : 'slide-left'
        })
        return{
            transitionName
        }
    }
}
</script>

<style lang='less'>
    .homeWrap{
        // background-color: rgba(0, 0, 0, 0.6);
        width: 100%;
        // height: 100vh;
    }
    .slide-left-enter-active,
    .slide-left-leave-active{
        height: 100%;
        will-change: transform;
        transition: all 500ms cubic-bezier(.55,0,.1,1);
        position: absolute;
        backface-visibility: hidden;
    }
    .slide-right-enter-active{
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    .slide-right-leave-active{
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    .slide-left-enter-active{
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    .slide-left-leave-active{
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

</style>